<template>
    <!-- 品牌专区 -->
    <div>
        <Screening />
    </div>
    <div class="branding">
        <div class="w branding_box">
            <div class="branding_alathe_box">
                <div class="alathe_box">
                    <img class="alathe_box_img" width="50px" src="@/assets/img/header/cz.png" alt="">
                    <div class="alathe_Box_text">
                        <h3 class="alathe_Box_h3">沧州兴吉管道有限公司</h3>
                        <div class="alathe_Box_dic">主营产品：拖链、弯头12313132</div>
                    </div>
                </div>
            </div>
            <div class="tabWindow">
                <Tabwindow/>
            </div>
        </div>
    </div>
</template>
<script setup>
import Screening from '@/components/screening/index.vue'
import Tabwindow from '@/components/tab_window/index.vue'
</script>
<style lang="scss" scoped>
.w {
    width: 75vw;
    margin: 0 auto;
}

.branding {
    margin-top: 10px;
    background-color: #f6f6f6;
    height: 43.75vw;
    overflow: hidden;
    padding-bottom: 15px;

    .branding_box {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 43.75vw;
        background-color: #fff;
        margin-top: 10px;
        .branding_alathe_box{
            display: flex;
            flex-wrap: wrap;
            padding: 20px 5px 0;
            .alathe_box {
                display: flex;
                align-items: center;
                width: 17.1875vw;
                height: 4.0625vw;
                margin-right: 8px;
                margin-bottom: 10px;
                background-color: #fff;
                border-radius: 5px;
                padding-left: 15px;
                box-shadow: 0 2px 2px 0 #ccc;

                &:nth-child(4n){
                    margin-right: 0;
                }

                .alathe_box_img{
                    margin-right: 10px;
                }
    
                .alathe_Box_text {
    
                    margin-left: 5px;
    
                    .alathe_Box_h3 {
                        
                        font-size: 14px;
                        color: #555;
                    }
    
                    .alathe_Box_dic {
                        width: 11.9375vw;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        font-size: 12px;
                        color: #555555;
                    }
                }
            }
        }

        .tabWindow{
            padding-bottom: 15px;
        }

    }
}
</style>